<%-- 
    Document   : template
    Created on : Dec 30, 2011, 11:37:25 PM
    Author     : manish
--%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib uri = "http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <link rel="stylesheet" href="resources/css/BrightSide.css" type="text/css" />
        <link rel="stylesheet" href="resources/css/prettyPhoto.css" type="text/css" />

        <script type="text/javascript" src="resources/js/lib/jquery/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="resources/js/lib/atmosphere/jquery.atmosphere.js"></script>
        <script type="text/javascript" src="resources/js/lib/jquery/jquery.mousewheel.min.js"></script>
        <script type="text/javascript" src="resources/js/lib/jquery/jquery.prettyPhoto.js"></script>
        <script type="text/javascript" src="resources/js/atmosphereClient.js"></script>
        <script type="text/javascript" src="resources/js/imageFunctions.js"></script>
        <script src="resources/js/lib/jgplot/jquery.jqplot.min.js" type="text/javascript"></script>
        <script src="resources/js/lib/jgplot/plugins/jqplot.canvasTextRenderer.min.js" type="text/javascript"></script>
        <script src="resources/js/lib/jgplot/plugins/jqplot.canvasAxisLabelRenderer.min.js" type="text/javascript"></script>
        <script src="resources/js/lib/jgplot/plugins/jqplot.highlighter.min.js" type="text/javascript"></script>
        <script src="resources/js/lib/jgplot/plugins/jqplot.bubbleRenderer.min.js" type="text/javascript" ></script>

        <tiles:insertAttribute name="import"/>

        <title><c:out value = "${userInfo.fullname}"/></title>
    </head>
    <body>
        <!-- wrap starts here -->
        <div id="wrap">
            <tiles:insertAttribute name="header" />
            <!-- content-wrap starts here -->
            <div id="content-wrap">		
                <tiles:insertAttribute name="sidebar" />
                <div id="main">
                    <div >
                        <h1 style="margin-top:10px; margin-left:0px;color: #666666; font-weight: bold"><c:out value = "${userInfo.fullname}"/></h1>
                        <c:if test="${userInfo.typeOfAttendant == 'ATHLETE'}">
                            <c:if test="${healthFeedHistory == null}">
                                <img src="resources/images/heartbeat_graph.jpg" width="550px" height="100px" />
                            </c:if>
                            <c:if test="${healthFeedHistory != null}">
                                <div id="heartRateGraph" style="width:530px;height:100px"></div>
                            </c:if>
                        </c:if>
                    </div>
                    <!-- end of code for the heart beat graph-->
                    <div class="tabstyle">
                         <a href='/norsemanserver/profile?username=<c:out value = "${userInfo.username}"/>&typeOfBrowse=feed&routeId=<c:out value="${routeId}"/>'> Feed </a> | <a href='/norsemanserver/profile?username=<c:out value = "${userInfo.username}"/>&typeOfBrowse=map&routeId=<c:out value="${routeId}"/>'> Map </a> | <a href='/norsemanserver/profile?username=<c:out value = "${userInfo.username}"/>&typeOfBrowse=media&routeId=<c:out value="${routeId}"/>'>Photos &amp; Videos</a>
                    </div>
                    <tiles:insertAttribute name="main" />
                </div>
                <tiles:insertAttribute name="rightbar" />
            </div>
            <tiles:insertAttribute name="footer" />
        </div>
        <script type="text/javascript" charset="utf-8">
            <c:if test="${userInfo.typeOfAttendant == 'ATHLETE'}">
                <c:if test="${healthFeedHistory != null}">
                    var heartRatePoint = [];
                    <c:forEach items="${healthFeedHistory}" var="healthFeed">
                    heartRatePoint.push([<c:out value = "${healthFeed.index}"/>, <c:out value = "${healthFeed.heartRate}"/>]);
                    </c:forEach>
                </c:if>
            </c:if>

            $(document).ready(function(){
                $("a[rel^='prettyPhoto']").prettyPhoto();
                <c:if test="${userInfo.typeOfAttendant == 'ATHLETE'}">
                    <c:if test="${healthFeedHistory != null}">
                    $.jqplot('heartRateGraph', [heartRatePoint], {
                        series:[
                            {
                                showMarker:false,
                                fill:false
                            }
                        ],
                        axes:{
                            xaxis:{
                                show: false,
                                pad: 0,
                                tickOptions:{
                                    show: false,
                                    showMark:false,
                                    showGridline: true
                                }
                            },
                            yaxis:{
                                show : false,
                                tickOptions:{
                                    show: true,
                                    showMark:false,
                                    showGridline: true
                                }
                            }
                        }
                    });
                    </c:if>
                </c:if>
            });
        </script>
    </body>
</html>

